import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getChannelsAction, setIdAction } from "./../store/action/channel";

export default function Channel() {
  const dispatch = useDispatch();
  const { list, id } = useSelector((state) => state.channel);

  useEffect(() => {
    dispatch(getChannelsAction());
  }, [dispatch]);

  return (
    <ul className="category">
      {list.map((item) => (
        <li
          className={item.id === id ? "select" : ""}
          key={item.id}
          onClick={() => dispatch(setIdAction(item.id))}
        >
          {item.name}
        </li>
      ))}
    </ul>
  );
}
